﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id="Description">This demo shows how to conditionally format the bullet chart
        labels and tooltip.</title>
    <meta name="keywords" content="bullet chart, bullet graph, BulletChart, chart, format, formatting, jQuery bullet graph, jQuery bullet chart, jQWidgets, jqxBulletChart, label, tooltip" />
    <meta name="description" content="This demo shows how to conditionally format the bullet chart labels and tooltip." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbulletchart.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxBulletChart").jqxBulletChart({
                width: 150,
                height: 500,
                barSize: "35%",
                title: "Temperature in Boston, Mass.",
                description: "on 28 May",
                ranges: [
                    { startValue: 0, endValue: 10, color: "#0099FF", opacity: 1 },
                    { startValue: 10, endValue: 15, color: "#006600", opacity: 1 },
                    { startValue: 15, endValue: 20, color: "#FF6600", opacity: 1 },
                    { startValue: 20, endValue: 25, color: "#FF4526", opacity: 1 }
                ],
                pointer: { value: 11, size: "25%", color: "#181818" },
                target: { value: 15, size: 4, color: "#181818" },
                ticks: { position: "both", interval: 5, size: 10 },
                orientation: "vertical",
                labelsFormatFunction: function (value, position) {
                    var labelsColor;
                    if (value < 10) {
                        labelsColor = "#0099FF";
                    } else if (value < 15) {
                        labelsColor = "#006600";
                    } else if (value < 20) {
                        labelsColor = "#FF6600";
                    } else {
                        labelsColor = "#FF4526";
                    }

                    if (position == "near") {
                        return "<span style='color: " + labelsColor + ";'>" + (value * 1.8 + 32) + "°F</span>";
                    } else {
                        return value + "°C";
                    }
                },
                showTooltip: true,
                tooltipFormatFunction: function (value, target) {
                    return "<div>Temperature on May 28: <strong>" + (value * 1.8 + 32) + "°F</strong> (" + value + "°C)</div><div>Average temperature in May: <strong>" + (target * 1.8 + 32) + "°F</strong> (" + target + "°C)</div>"
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxBulletChart">
    </div>
</body>
</html>
